/*轮播图*/
(function () {
	let count = 1
	const picWidth = 1245

	function Carousel(dots, arrows, ul) {
		this.dots = dots
		this.arrows = arrows
		this.ul = ul
	}

	/*点击左右两个点进行轮播*/
	Carousel.prototype.runByArrows = function () {
		if (this.arrows.length !== 2) {
			return
		}

		for (let i = 0; i < this.arrows.length; i++) {
			const currentArrow = this.arrows[i]
			const currentUl = this.ul
			const currentDots = this.dots
			this.arrows[i].onclick = function () {
				const direction = getArrowsDirection(currentArrow)
				runArrowsDirection(direction, currentUl, currentDots)
			}
		}
	}
	/*点击右下角的点进行轮播*/
	Carousel.prototype.runByDots = function () {
		if (this.dots.length < 0) {
			return
		}
		const currentDots = this.dots
		const currentUl = this.ul
		for (let i = 0; i < currentDots.length; i++) {
			currentDots[i].onclick = function () {
				removeSelectDots(currentDots)
				if (!currentDots[i].classList.contains('selected')) {
					currentDots[i].classList.add('selected')
				}
				currentUl.style.transform = 'translateX(-' + (picWidth * (i + 1)) + 'px)'
			}
		}
	}

	/*删除右下角所有点中选中的样式*/
	function removeSelectDots(dots) {
		for (let i = 0; i < dots.length; i++) {
			dots[i].classList.remove('selected')
		}
	}

	/*判断左右两边的方向*/
	function getArrowsDirection(currentArrow) {
		return (currentArrow.title === '0' ? 'left' : 'right')
	}

	/*ul添加动画*/
	function addTransition(ul) {
		ul.style.transition = '1s all'
	}

	/*ul删除动画*/
	function removeTransition(ul) {
		ul.style.transition = 'none'
	}

	/*function addTransform(ul, width) {
		ul.style.transform = 'translateX(-' + width + 'px)'
	}*/

	/*左右点击进行轮播逻辑处理*/
	function runArrowsDirection(direction, ul, currentDots) {
		if (direction === 'right') {
			addTransition(ul)

			if (count === 5) {//最后一张
				count++
				ul.style.transform = 'translateX(-' + (picWidth * count) + 'px)'
				count = 1
			} else {
				count++
				ul.style.transform = 'translateX(-' + (picWidth * count) + 'px)'
				if (count === 2) {
					removeTransition(ul)
				}
			}
		} else {
			addTransition(ul)
			if (count === 1) {//第一张
				count--
				ul.style.transform = 'translateX(-' + (picWidth * count) + 'px)'
				count = 5
			} else {
				count--
				ul.style.transform = 'translateX(-' + (picWidth * count) + 'px)'
				if (count === 4) {
					removeTransition(ul)
				}
			}
		}

		if (currentDots.length < 0) {
			return
		}
		for (let i = 0; i < currentDots.length; i++) {
			currentDots[i].classList.remove('selected')
			if (count === (i + 1)) {
				currentDots[i].classList.add('selected')
			}
		}
	}

	window.Carousel = Carousel
})();

/*小米闪购tab点击移动切换*/
(function () {
	let count = 0
	const width = 995

	function FlashCarousel(directions, ul) {
		this.directions = directions
		this.ul = ul
	}

	FlashCarousel.prototype.run = function () {
		const currentDirections = this.directions
		const currentUl = this.ul
		if (currentDirections.length !== 2) {
			return
		}
		for (let i = 0; i < currentDirections.length; i++) {
			currentDirections[i].onclick = function () {
				if (currentDirections[i].classList.contains('flash_selected')) {
					runByDirection(this, this.title, currentUl)
					console.log(count)
				}
			}

		}

		function runByDirection(triangle, direction, ul) {
			if (direction === 'right') {
				count++
				ul.style.transform = 'translateX(-' + (width * count) + 'px)'
			} else {
				count--
				ul.style.transform = 'translateX(-' + (width * count) + 'px)'
			}
			if (count === 1) {
				currentDirections[0].classList.add('flash_selected')
				currentDirections[1].classList.add('flash_selected')
			} else if (count === 0) {
				currentDirections[0].classList.remove('flash_selected')
			} else if (count === 2) {
				currentDirections[0].classList.add('flash_selected')
				currentDirections[1].classList.remove('flash_selected')
			}

		}
	}

	window.FlashCarousel = FlashCarousel
})();

/*tab页切换*/
(function () {
	function ProductTab(tabBox, tabLis) {
		this.tabBox = tabBox
		this.tabLis = tabLis
	}

	ProductTab.prototype.init = function () {
		const currentTabLis = this.tabLis
		const currentTabBox = this.tabBox
		if (currentTabLis.length < 0) {
			return
		}
		for (let i = 0; i < currentTabLis.length; i++) {
			currentTabLis[i].onmouseover = function () {
				showUl(currentTabBox, i)
				removeAllHoverStyle(currentTabLis)
				if (!this.classList.contains('tab_select')) {
					this.classList.add('tab_select')
				}
			}
		}
	}

	function removeAllHoverStyle(tabLis) {
		for (let i = 0; i < tabLis.length; i++) {
			tabLis[i].classList.remove('tab_select')
		}
	}

	function showUl(tabBox, index) {
		const childs = tabBox.children
		for (let i = 0; i < childs.length; i++) {
			if (!childs[i].classList.contains('display_none')) {
				childs[i].classList.add('display_none')
			}
			if (index === i) {
				childs[i].classList.remove('display_none')
			}
		}
	}

	window.ProductTab = ProductTab
})();

/*搜索框下来历史记录*/
(function () {
	let pullDataArray = JSON.parse(localStorage.getItem('pullDataArray')) || []

	function HistorySearch(searchInput, searchBtn,pullDownUl) {
		this.searchInput = searchInput
		this.searchBtn = searchBtn
		this.pullDownUl = pullDownUl
	}

	HistorySearch.prototype.initSearch = function () {
		const currentSearchInput = this.searchInput
		const currentSearchBtn = this.searchBtn
		const currentPullDownUl = this.pullDownUl

		/*搜索框获取焦点
		* 1, 隐藏搜索框中默认搜索详情
		* 2, 整体form表达加边框样式
		* 3, 处理下拉框历史数据显示逻辑
		* */
		currentSearchInput.onfocus = function () {
			searchInfoDisplay(document.querySelector('.search_info'))
			addStyle(currentSearchInput, document.querySelector('.icon_search'), document.querySelector('.pull_down_box'))
			showPullData(currentSearchInput)
		}

		/*搜索框失去焦点
		*1, 显示搜索框中默认搜索详情
		*2, 整体form表单去除加边框样式
		* */
		currentSearchInput.onblur = function () {
			searchInfoShow(document.querySelector('.search_info'))
			removeStyle(currentSearchInput, document.querySelector('.icon_search'), document.querySelector('.pull_down_box'))
		}

		currentSearchBtn.onmousedown = function () {
			if (!currentSearchInput.value) {
				return
			}
			if (pullDataArray.indexOf(currentSearchInput.value) === -1) {
				pullDataArray.push(currentSearchInput.value)
				localStorage.setItem('pullDataArray', JSON.stringify(pullDataArray))
			}

		}

		currentPullDownUl.onmousedown = function (e) {
			console.log(e.target.dataset.index)
			if (e.target.dataset.index) {
				pullDataArray.splice(e.target.dataset.index, 1)
				localStorage.setItem('pullDataArray', JSON.stringify(pullDataArray))
				showPullData(currentSearchInput)
			}
		}
	}



	/*下拉搜索框逻辑处理
	*1, 获取localStorage中数据,如果没有,删除样式,运行结束
	*2, 遍历localStorage中数据,动态添加li(之前需要先删除)
	*3, 动态添加li
	* */
	function showPullData(searchInput) {
		const pullDataArray = localStorage.getItem('pullDataArray')
		const pullDataArrayObj = JSON.parse(pullDataArray)
		if (!pullDataArray || pullDataArrayObj.length === 0) {
			removeStyle(searchInput, document.querySelector('.icon_search'), document.querySelector('.pull_down_box'))
			return
		}

		console.log(pullDataArray)
		const ul = document.getElementById('pull_down_ul')
		/*删除ul下面的li*/
	  while (ul.hasChildNodes()) {
			ul.removeChild(ul.firstChild)
	  }

		  for (let i = (pullDataArrayObj.length - 1);i > 0; i--) {
			  let li = document.createElement('li')
			  li.classList.add('pull_down_li')
			  li.innerHTML ='<a href="javascript:;">'
				  +'<div class="left">'+ pullDataArrayObj[i] +'</div>'
				  +'<div class="right" data-index='+i+'>删除</div>'
				  +'</a>'
			  ul.appendChild(li)
		  }
	}



	function searchInfoShow(searchInfo) {
		searchInfo.classList.remove('display_none')
	}

	function searchInfoDisplay(searchInfo) {
		searchInfo.classList.add('display_none')
	}

	function addStyle(searchInput, iconSearch, pullDownBox) {
		searchInput.setAttribute('style', 'border: 1px solid #ff6700;')
		iconSearch.setAttribute('style', 'border-top: 1px solid #ff6700;border-bottom: 1px solid #ff6700;border-right: 1px solid #ff6700;')
		pullDownBox.setAttribute('style', 'display: block;')
	}

	function removeStyle(searchInput, iconSearch, pullDownBox) {
		searchInput.setAttribute('style', 'border: 1px solid #e0e0e0;')
		iconSearch.setAttribute('style', 'border-top: 1px solid #e0e0e0;border-bottom: 1px solid #e0e0e0;border-right: 1px solid #e0e0e0;')
		pullDownBox.setAttribute('style', 'display: none;')
	}



	window.HistorySearch = HistorySearch
})();

window.onload = function () {
	const carousel = new Carousel(document.getElementsByClassName('dots'), document.getElementsByClassName('arrows'), document.getElementById('carouselUl'))
	carousel.runByArrows()
	carousel.runByDots()

	const flashCarousel = new FlashCarousel(document.getElementsByClassName('direction'), document.getElementById('flashbuy_ul'))
	flashCarousel.run()

	const productTab = new ProductTab(document.getElementById('home_tab_box'), document.getElementsByClassName('tab_li'))
	productTab.init()

	const historySearch = new HistorySearch(document.querySelector('#searchInput'), document.getElementById('search_btn'), document.getElementById('pull_down_ul'))
	historySearch.initSearch()

}

